import { formatDateTime, getStandardDateTime, getRelativeTime } from './dateTimeFormatter.js';

// 使用示例
export function showDateTimeExamples() {
  const now = new Date();
  
  // 示例1: 格式化今天的日期时间
  console.log('今天:', formatDateTime(now));
  // 输出: "今天 下午3点30分"
  
  // 示例2: 格式化明天的日期时间
  const tomorrow = new Date(now.getTime() + 24 * 60 * 60 * 1000);
  console.log('明天:', formatDateTime(tomorrow));
  // 输出: "明天 上午9点00分"
  
  // 示例3: 格式化后天的日期时间
  const dayAfterTomorrow = new Date(now.getTime() + 2 * 24 * 60 * 60 * 1000);
  console.log('后天:', formatDateTime(dayAfterTomorrow));
  // 输出: "后天 凌晨2点15分"
  
  // 示例4: 格式化后续日期
  const futureDate = new Date(now.getTime() + 5 * 24 * 60 * 60 * 1000);
  console.log('后续日期:', formatDateTime(futureDate));
  // 输出: "2024-01-15 晚上8点45分"
  
  // 示例5: 只显示日期部分
  console.log('只显示日期:', formatDateTime(futureDate, false));
  // 输出: "2024-01-15"
  
  // 示例6: 获取标准格式
  console.log('标准格式:', getStandardDateTime(futureDate));
  // 输出: "2024-01-15 20:45:00"
  
  // 示例7: 获取相对时间
  console.log('相对时间:', getRelativeTime(futureDate));
  // 输出: "5天后"
}

// 在Vue组件中的使用示例
export const vueComponentExample = {
  data() {
    return {
      selectedDateTime: null,
      formattedDateTime: ''
    };
  },
  methods: {
    // 格式化选中的日期时间
    formatSelectedDateTime() {
      if (this.selectedDateTime) {
        this.formattedDateTime = formatDateTime(this.selectedDateTime);
      }
    },
    
    // 处理日期时间选择器确认事件
    onDateTimeConfirm(event) {
      this.selectedDateTime = event.dateTime;
      this.formattedDateTime = formatDateTime(this.selectedDateTime);
      console.log('选中的日期时间:', this.formattedDateTime);
    }
  }
};

// 在模板中的使用示例
export const templateExample = `
<template>
  <view>
    <!-- 显示格式化的日期时间 -->
    <text>{{ formattedDateTime }}</text>
    
    <!-- 日期时间选择器 -->
    <dateTimePicker 
      :show="showPicker" 
      @change="onDateTimeConfirm"
      @update:show="showPicker = $event"
    />
    
    <!-- 显示相对时间 -->
    <text>{{ relativeTime }}</text>
  </view>
</template>

<script>
import { formatDateTime, getRelativeTime } from '@/utils/dateTimeFormatter.js';

export default {
  data() {
    return {
      showPicker: false,
      selectedDateTime: null,
      formattedDateTime: '',
      relativeTime: ''
    };
  },
  methods: {
    onDateTimeConfirm(event) {
      this.selectedDateTime = event.dateTime;
      this.formattedDateTime = formatDateTime(this.selectedDateTime);
      this.relativeTime = getRelativeTime(this.selectedDateTime);
    }
  }
};
</script>
`;

export default {
  showDateTimeExamples,
  vueComponentExample,
  templateExample
}; 